<template>
    
    <el-card class="!border-none" shadow="never">
        
        <div class="text-2xl flex items-center justify-center mb-7 mt-5">
            {{ props.label }}
        </div>
        <div class="flex">
            <el-button type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新增
            </el-button>
            
            <el-button @click="handleExpand">
                展开/折叠
            </el-button>
            
            
            <div class="inline-block  flex-1   items-center justify-end" v-if="!!warn">
                <div class="text-sm  text-blue-600			">
                    警告:{{ warn }}
                </div>
            
            
            </div>
        
        </div>
        
        
        <el-table
            v-loading="loading"
            ref="tableRef"
            class="mt-4"
            size="large"
            :data="tableData"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column label="名称" prop="value" min-width="150"/>
            <el-table-column label="映射值" prop="name" min-width="170"></el-table-column>
            <el-table-column label="类型" min-width="120">
                <template #default="{ row }">
                    <p v-if="row.pid===0"> {{ type }}</p>
                </template>
            
            </el-table-column>
            
            <el-table-column label="状态" prop="isDelete" min-width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.isDelete === 0">正常</el-tag>
                    <el-tag v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="更新时间" prop="updateTime" min-width="140" :formatter="formatterCreateTime"/>
            
            <el-table-column label="操作" width="212" fixed="right">
                <template #default="{ row }">
                    <el-button
                        v-if="row.pid === 0"
                        type="primary"
                        link
                        @click="handleAdd(row)"
                    >
                        新增
                    </el-button>
                    
                    
                    <el-button
                        
                        type="primary"
                        link
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    
                    
                    <el-button
                        
                        type="danger"
                        link
                        @click="handleDelete(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            
            
            </el-table-column>
        </el-table>
    </el-card>
    
    
    <EditPopup v-if="showEdit" ref="editRef" @success="getEditSuccess" @close="showEdit = false"/>


</template>

<script lang="ts" setup>
import EditPopup from './common-config-popup.vue'
import {ElMessage, ElTable} from "element-plus";
import feedback from "@/utils/feedback";
import {AfterSaleConfigItemDTO} from "@/api/system/dto/ AfterSaleConfigItemDTO";
import {UnwrapNestedRefs} from "@vue/reactivity";


import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import AfterSaleConfigItemRequest from "@/api/system/reuquest/AfterSaleConfigItemRequest";
import {delAfterSaleConfig, getAfterSaleConfigByParam} from "@/api/system/SystemConfigService";


interface AfterSaleConfigProps {
    warn?: string | null
    type: string | null
    label: string | null
}

const props = withDefaults(defineProps<AfterSaleConfigProps>(), {
    warn: null,
    type: null,
    label: null
})


const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()


// table 数据加载
const loading = ref(false)
// 显示配置项
const showEdit = ref(false)
// 是否展开
let isExpand = false


/**
 * 表单数据
 *
 * @author 徐寿春
 * 2023/4/11 09:50
 */
let tableData: UnwrapNestedRefs<AfterSaleConfigItemDTO[]> = reactive([])


/**
 *  处理新增物料
 *
 * @author 徐寿春
 * 2023/4/11 11:12
 */
async function handleAdd(row?: Record<any, any>) {
    showEdit.value = true
    await nextTick()
    
    if (!!row) {
        editRef.value?.setFormData({pid: row.id})
        
    }
    editRef.value?.open('add', props.type)
}


/**
 * 对某行数据进行编辑
 */
async function handleEdit(data: any) {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getMenuDetail(data)
}

/**
 * 删除
 * @param id
 */
async function handleDelete(id: number) {
    await feedback.confirm('确定要删除？')
    
    await delAfterSaleConfig({id}).then(r => feedback.msgSuccess('删除成功')).catch(msg => {
        ElMessage({type: 'error', message: msg})
    });
    
    await getMenuLists()
}


/**
 * 子组件处理完成确定回调方法
 */
function getEditSuccess() {
    getMenuLists()
}


/**
 * 展开
 */
function handleExpand() {
    isExpand = !isExpand
    toggleExpand(tableData, isExpand)
}

/**
 * 全局展开
 *
 * @param children
 * @param unfold
 */
const toggleExpand = (children: any[], unfold = true) => {
    for (const key in children) {
        tableRef.value?.toggleRowExpansion(children[key], unfold)
        if (children[key].children) {
            toggleExpand(children[key].children!, unfold)
        }
    }
}

/**
 *
 * 获取菜单列表值
 *
 * @author 徐寿春
 * 2023/4/11 10:28
 */
async function getMenuLists() {
    loading.value = true
    let request = new AfterSaleConfigItemRequest();
    request.type = props.type
    await getAfterSaleConfigByParam(request).then(response => {
        if (!!response) {
            tableData = response
        }
        
    }).finally(() => {
        loading.value = false
    })
    
}

/**
 * 时间处理器
 *
 * @author 徐寿春
 * 2023/4/11 13:50
 */
let {formatterCreateTime} = useFormatterTimeManager();


onMounted(() => {
    getMenuLists()
    
})
</script>
